body{
    opacity: 0;
}
#wrap{
    width:360px;
    background-color:#282828;
    height:540px;
    margin:0 auto;
    position:relative;
    overflow: hidden;
}

#mHead img,#topMenu img{
    width: 100%;
    height: 100%;
    border:none;
}

#topMenu{
    margin-top: 0;
    padding: 0;
    position:relative;
    background-color: #535353;
    -webkit-box-shadow: 0 2px 2px 0 #000;   
    -moz-box-shadow: 0 2px 2px 0 #000;   
    box-shadow: 0 2px 2px 0 #000;
}
#topMenu div{
    float: right;
}
#topMenu #back, #topMenu #clear{
    float: left;
}
#save{
    opacity: 0.5;
}
#head{
    height:60px;
    text-align: center;
    
}
.headGrid1, .headGrid2, .headGrid3{
    float:left;
    margin-top: 3px;
    /*width:33%;*/
    height:100%;
}
.headGrid1{
    width: 42.5%;
}
.headGrid2 {
    width: 15%;
}

.headGrid3{
    width:40%;
}

#pre, #next, #largerCanvas, #smallerCanvas{
    float: left;
    /*margin-right: 6%;*/
}
#next, #smallerCanvas{
    margin-left:2%;
}
#pre img,#next img, #smallerCanvas img, #largerCanvas img{
    width:100%;
}
#smallerCanvas, #largerCanvas{
    opacity: 0.5;
}
#preView{
    margin:0 auto;
}
#preView img{
    height:100%;
    text-align: center;
}
#canvasBox{
    text-align: center;
    margin:0 auto;
    overflow: hidden;
    
}
#canvas{
    /*margin-left: 10px;*/
}
#allColor{
    background-color: #535353;
    text-align: center;
    padding: 5px 0;
    width: 100%;
    position: absolute;
    overflow: hidden;
    -webkit-box-shadow: 0 -2px 2px 0 #000;   
    -moz-box-shadow: 0 -2px 2px 0 #000;   
    box-shadow: 0 -2px 2px 0 #000;
}

#colorBox{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}
#allColors{
    position: absolute;
    height:5em;
    padding: 1.5% 0 0 1%;
    width:100%;
    background-color:#535353;
    overflow: hidden;
}
#allColorBox{
    float: left;
    width: 100%;
    height:100%;
    overflow: hidden;
}
#floatColorBox{
    float: left;
}
.floatColor{
    float: left;
    margin-left:1%;
    margin-top: 1%;
    width:30px;
    height:30px;
    /*border-radius: 5px;*/
}
#allColor .eachColor{
    position: absolute;
    display: block;
    width:30px;
    height:30px;
    /*border-radius: 5px;*/
}


.active{
    border:2px solid #fff;
}
#controlBoard{
    position: absolute;
    bottom:0;
    height:75px;
    width:100%;
    border-top:2px solid #282828;
    background-color: #535353;
}
#controlBoard div{
    float: left;
    text-align: center;
    width: 20%;
    height:100%;
    background-color: #535353;
}
#controlBoard .bgc{
    text-align: left;
}
#controlBoard .pen{
    text-align: right;
}
#controlBoard div img{
    height:80%;
    margin-top: 5%;
}
.nc{
    position: relative;
    top: -3px;
    height:80px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 0 3px #282828 inset;   
    -moz-box-shadow: 0 0 0 3px #282828 inset;   
    box-shadow: 0 -3px 0 2px #282828 inset;

}
#trangle,#nowColor{
    position: relative;
    top:-5px;
    display: block;
    text-align: center;
}
#controlBoard #trangle img{
    width: 20%;
    margin:0;
}
#nowColor{
    top:-1px;
    margin: 0 auto;
    width: 25px;
    height:25px;
    padding:2%;
    background-image: url(../images/fang.png);
    background-size: 100% 100%;

}
#c{
    margin: 0 auto;
    display: block;
    width: 10px;
    height:10px;
    background-color: #000;
    /*border-radius: 12px;*/
}
#controlBoard #pencil{
    text-align: right;
}

